<template>
    <view class="h-full flex flex-col" :class="getCurrentThemeClass">
        <view class="flex-1 overflow-hidden min-h-0">
            <slot></slot>
        </view>
        <view
            class="flex-shrink-0 safe-area-inset-bottom"
            :style="getSafeAreaStyle"
            v-if="safeArea"
        ></view>
    </view>
</template>
<script lang="ts">
export default {
    // #ifdef MP-WEIXIN
    options: {
        virtualHost: true,
    },
    // #endif
};
</script>
<script lang="ts" setup>
import { getCurrentThemeClass } from "@/utils/theme";
import { computed } from "vue";
import type { CSSProperties } from "vue";
import type { zPageProps } from "./z-page.type";
const props = withDefaults(defineProps<zPageProps>(), {
    safeArea: true,
});

const getSafeAreaStyle = computed(() => {
    let style: CSSProperties = {};
    if (props.safeAreaBackgroundColor) {
        style.backgroundColor = props.safeAreaBackgroundColor;
    }
    return style;
});
</script>
